
$.extend({
  scrollInit: function (id, data) {
    // 工具函数，根据每页数量，将数据分组
    function groupByNum(data, num) {
      var res = [];
      var pages = data.length % num == 0 ? Math.floor(data.length / num) : Math.floor(data.length / num) + 1
      for (var i = 0; i < pages; i++) {
        var tempArr = [];
        for (var j = 0; j < num; j++) {
          if (data[i * num + j]) {
            tempArr.push(data[i * 4 + j]);
          }
        }
        res.push(tempArr);
      }
      return res;
    }

    // 初始化数据
    var scrollData = groupByNum(
      //JSON.parse($('#' + id).attr(data)),
      data,
      4
    );
    var step = $('#' + id).width();
    var pageNum = scrollData.length;

    // 生成 dom
    var htm = '';
    htm += '<div class="left-btn" id="scollLeftBtn">&lt;</div>';
    htm += '<div class="right-btn" id="scollRightBtn">&gt;</div>';
    htm +=
      '<div class="grade-scroll-wrap" style="width:' +
      step * pageNum +
      'px">';

    for (var i = 0; i < scrollData.length; i++) {
      htm += '<div class="grade-scroll-page">';
      for (var j = 0; j < scrollData[i].length; j++) {
        //  item htmlDom
        var item = scrollData[i][j]
        htm +=
          '<div class="grade-page-item">' +
          // 第一行
          '<p class="grade-item-p-1">' +
          '<span class="grade-item-black">' + item.product_name + item.size + '</span>' +
          '<span class="grade-item-black fr">石家庄</span>' +
          '</p>' +
          // 第二行
          '<p class="grade-item-p-2">' +
          '<span class="grade-item-gray">价格</span>' +
          '<span class="grade-item-purple p_10">' + item.price + '</span>' +
          '<span class="grade-item-gray pl_20">涨跌</span>' +
          '<span class="grade-item-purple p_20">' + item.difference + '</span>' +
          '<span class="grade-item-gray pl_20">涨跌幅</span>' +
          '<span class="grade-item-purple p_10">' + item.percentage + '</span>' +
          '<span class="grade-item-gray">%</span>' +
          '</p>' +
          // 第三行
          '<p class="grade-item-p-3">' +
          '<span class="grade-item-black">今日报价</span>' +
          '<span class="grade-item-black fr">' + item.date + '</span>' +
          '</p>' +
          // 弹出框
          '<div class="hover-dialog"><div id="chartdialog' + item.product_id + '" style="width:400px;height:300px;"></div></div>' +
          '</div>';
      }
      htm += '</div>';
    }

    htm += '</div>';
    $('#' + id).append(htm);

    var leftBtn = $('#' + id).find('#scollLeftBtn');
    var rightBtn = $('#' + id).find('#scollRightBtn');
    var reduceTime = 1000;
    var lastTrigger = 0;

    // 上一页
    leftBtn.bind('click', function () {
      // 防抖策略
      let now = new Date().getTime();
      if (now - lastTrigger <= reduceTime) {
        console.log('您点击的太快了！');
        return false;
      } else {
        lastTrigger = now;

        // 正常逻辑
        let marginLeft = parseInt(
          $('#' + id + ' .grade-scroll-wrap').css('margin-left')
        );

        if (marginLeft < 0) {
          $('#' + id + ' .grade-scroll-wrap').animate(
            { 'margin-left': marginLeft + step + 'px' },
            reduceTime / 2
          );
        }
      }
    });
    // 下一页
    rightBtn.bind('click', function () {
      // 防抖策略
      let now = new Date().getTime();
      if (now - lastTrigger <= reduceTime) {
        console.log('您点击的太快了！');
        return false;
      } else {
        lastTrigger = now;

        // 正常逻辑
        let marginLeft = parseInt(
          $('#' + id + ' .grade-scroll-wrap').css('margin-left')
        );

        if (marginLeft > -step * (pageNum - 1)) {
          $('#' + id + ' .grade-scroll-wrap').animate(
            { 'margin-left': marginLeft - step + 'px' },
            reduceTime / 2
          );
        }
      }
    });

    var hoverDom = null
    $('.grade-page-item').hover(function () {
      hoverDom = $(this)
      $(this).find('.hover-dialog').css({
        position: 'fixed',
        display: 'block',
        left: (hoverDom.offset().left - 30) + 'px',
        top: (hoverDom.offset().top - $(document).scrollTop() + 110) + 'px'
      })
    }, function () {
      $(this).find('.hover-dialog').css({
        display: 'none'
      })
    })

    $(window).scroll(function () {
      hoverDom.find('.hover-dialog').css({
        top: (hoverDom.offset().top - $(document).scrollTop() + 110) + 'px'
      })
    })

  },
});
var a = [];
var b = [];
var c = [];
$(function () {
  // 执行初始化


  $.ajax({
		type: "post",
    url: "https://wx.jiao-xw.com/productPriceList",
    data: {cate_id:107},
    dataType: "json",
		async:false,
    success: function (res) {
			var tmp = res.data;
			var arr = Array(); 		

			for(i=0;i<tmp.length;i++){
				arr.push(tmp[i]);	
			}
			a = arr;
      $.scrollInit('grade_a', a);
    }
  })


  $.ajax({
		type: "post",
    url: "https://wx.jiao-xw.com/productPriceList",
    data: {cate_id:105},
    dataType: "json",
		async:false,
    success: function (res) {
			var tmp = res.data;
			var arr = Array();

			for(i=0;i<tmp.length;i++){
				arr.push(tmp[i]);
			}
			b = arr;
      $.scrollInit('grade_b', b);
    }
  })


  $.ajax({
		type: "post",
    url: "https://wx.jiao-xw.com/productPriceList",
    data: {cate_id:108},
    dataType: "json",
		async:false,
    success: function (res) {
			var tmp = res.data;
			var arr = Array();

			for(i=0;i<tmp.length;i++){
				arr.push(tmp[i]);
			}
			c = arr;
      $.scrollInit('grade_c', c);
    }
  })

});
